﻿@page "/scheduler/basic-views"

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.DropDowns
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This demo showcases the usage of basic views available in Scheduler such as Day, Week, Work Week, Month and Agenda. Here, the wildlife events being held in zoos are displayed against its respective timings.  </p>
</SampleDescription>
<ActionDescription>
   <p> In this demo, Scheduler is showcased with 4 basic views namely  </p>
    <ul>
       <li>Day</li>
       <li>Week</li>
       <li>Work Week</li>
       <li>Month</li>
    </ul>
    <p>The user can navigate between different view options available on the header section just by clicking on it. From any of the views, the user can switch back to the day view by clicking dates in the date header section.</p>
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate" @bind-CurrentView="@ViewNow">
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView Option="View.Week"></ScheduleView>
                <ScheduleView Option="View.WorkWeek"></ScheduleView>
                <ScheduleView MaxEventsPerRow="2" Option="View.Month"></ScheduleView>
            </ScheduleViews>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>
<div class="col-lg-3 property-section">
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table id='property' title='Properties' class='property-panel-table' style="width: 100%;">
                <tbody>
                    <tr style="height: 50px">
                        <td style="width: 30%">
                            <div>
                                Current View
                            </div>
                        </td>
                        <td style="width: 70%;">
                            <div>
                                <SfDropDownList TValue="View" TItem="DropDownData" @bind-Value="@ViewNow" DataSource="@ViewData">
                                    <DropDownListFieldSettings Text="Name" Value="Value"></DropDownListFieldSettings>
                                </SfDropDownList>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code{
    public List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetZooEventData();
    public View ViewNow = View.Week;
    public DateTime CurrentDate = new DateTime(2020, 1, 16);
 
    List<DropDownData> ViewData = new List<DropDownData>() {
        new DropDownData { Name = "Day", Value = View.Day },
        new DropDownData { Name = "Week", Value = View.Week },
        new DropDownData { Name = "Work Week", Value = View.WorkWeek },
        new DropDownData { Name = "Month", Value = View.Month }
    };
    public class DropDownData
    {
        public string Name { get; set; }
        public View Value { get; set; }
    }

}